<template>
  <div class="mvmusic" v-cloak>
    <div class="bgc">
      <van-icon name="arrow-left" @click="fan" />

      <div>
        <van-icon name="wap-nav" />
        <van-cell title="1" @click="showShare = true" class="show" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
        />
      </div>
    </div>

    <div class="shi">
      <video
        muted="muted "
        autoplay="autoplay "
        loop
        controls
        :src="sum.url"
        width="100%"
        height="220px"
        poster="https://img2.baidu.com/it/u=56941742,3060560181&fm=253&fmt=auto&app=138&f=PNG?w=500&h=281"
      ></video>
      <div class="mvc">
        <p class="aaa">
          <img :src="arr.cover" alt="" /><span
            >{{ arr.artistName }}<van-icon name="add-o" class="jia"
          /></span>
        </p>
        <div class="mva">
          <p>MV {{ arr.name }}</p>
          <p class="desc">{{ arr.desc }}</p>

          <p class="time">{{ arr.publishTime }} <span></span></p>
        </div>
      </div>
    </div>
    <ul class="zan">
      <li>
        <p>
          <van-icon name="like-o" v-if="!falg" @click="like" /><van-icon
            name="like"
            v-if="falg"
            @click="like"
            class="hong"
          />
        </p>
        {{ num.likedCount }}
      </li>
      <li @click="showPopup">
        <p><van-icon name="more-o" /></p>
        {{ num.commentCount }}
      </li>
      <li>
        <p><van-icon name="share-o" /></p>
        {{ num.shareCount }}
      </li>
    </ul>
    <!-- 评论区 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <ul class="ping">
        <li v-for="data in hotComments" :key="data.commentId">
          <div class="ping-i">
            <img :src="data.user.avatarUrl" alt="" /><span>{{
              data.user.nickname
            }}</span>
          </div>

          <div class="lun">
            <van-icon name="fire-o" color="#ee0a24" /> {{ data.content }}
          </div>
          <p>{{ data.timeStr }}</p>
        </li>
        <li v-for="data in comments" :key="data.commentId">
          <div class="ping-i">
            <img :src="data.user.avatarUrl" alt="" /><span>{{
              data.user.nickname
            }}</span>
          </div>
          <div class="lun">
            {{ data.content }}
          </div>
          <p>{{ data.timeStr }}</p>
        </li>
        <div v-if="finished">....没有更多了</div>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";

import { reqMvAPI, reqMvDataAPI, reqMvDeAPI } from "../../api/yuncun";
import axios from "axios";
export default {
  data() {
    return {
      show: false,
      sum: {},
      arr: {},
      num: {},
      falg: false,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      comments: [],
      hotComments: {},
      finished: true,
      offset: 1,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //渲染
    async getMv(id) {
      const result = await reqMvAPI(id);

      this.sum = result.data.data;

      const results = await reqMvDataAPI(id);

      // console.log(results);
      this.arr = results.data.data;
      // console.log(results);
      const resultss = await reqMvDeAPI(id);
      // console.log(id);
      // console.log(resultss);
      this.num = resultss.data;
    },
    //点击红心
    like() {
      this.falg = !this.falg;
      if (this.falg) {
        this.num.likedCount += 1;
      } else {
        this.num.likedCount -= 1;
      }
    },
    //头部返回
    fan() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //获取mv评论
    async ping(id) {
      let num = this.offset * 40;
      this.finished = false; // 开启加载
      const res2 = await axios.get(
        "http://192.168.31.27:3000/comment/mv?id=" +
          id +
          "?offset=" +
          num +
          +"&timestamp=" +
          new Date().getTime(),
        {
          withCredentials: true,
        }
      );
      // console.log(res2);
      this.comments = [...this.comments, ...res2.data.comments];
      this.hotComments = res2.data.hotComments;
      if (res2.data.comments.length < 10) {
        // 说明是最后一页;
        this.finished = false;
      } else {
        this.offset++;
        this.finished = true;
      }
    },
    //评论区展示
    showPopup() {
      this.show = true;
    },
  },
  created() {
    let id = this.$route.params.id;
    this.getMv(id);
    this.ping(id);
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  components: {},
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
.show {
  position: absolute;
  top: 26px;
  right: 19px;
  width: 30px;
  opacity: 0;
}
.mvmusic {
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
}
.bgc {
  display: flex;

  padding: 30px 20px 0 20px;

  justify-content: space-between;
  background-color: black;
  color: #fff;
}
video {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.mvc {
  position: absolute;
  bottom: 2%;
  line-height: 22px;
}
.aaa {
  display: flex;
  color: #fff;
}
.aaa span {
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
}
.mvc img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.mva {
  color: #fff;
  background-color: black;
  padding: 0px 20px;
  width: 320px;
}
/* .mva p {
  margin-top: 20px;
} */
.zan {
  position: absolute;
  bottom: 20%;
  right: 0px;
  width: 70px;
  z-index: 222;
}
.zan li {
  color: #fff;
  text-align: center;
  list-style: none;
  margin-top: 20px;
  width: 70px;
  height: 70px;
}
.van-icon {
  font-size: 25px;
}
.jia {
  margin-left: 20px;
  color: rgba(255, 0, 0, 0.822);
  /* background-color: red; */
  font-size: 18px;
  border-radius: 50%;
}
.hong {
  color: red;
}
.mva .time {
  color: rgb(160, 158, 158);
  margin-top: 5px;
}
.mva p:nth-child(1) {
  font-size: 20px;
}
.mva p:nth-child(2) {
  overflow: hidden; /* //超出的文本隐藏 */
  text-overflow: ellipsis; /* //溢出用省略号显示 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* // 超出多少行 */
  -webkit-box-orient: vertical;
}
.desc {
  text-align: justify;
  max-height: 207px;
  overflow: hidden;
}
.ping {
  padding: 5px 10px;
}
.ping li {
  padding: 15px 20px;
}
.ping li img {
  width: 50px;
  height: 50px;
  float: left;

  margin-right: 20px;
  border-radius: 50%;
}
.ping-i span {
  color: rgb(10, 188, 233);
}
.ping-i {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  margin-right: 20px;
  font-weight: bold;
}
.lun {
  padding: 10px 20px;
  font-size: 14px;
  color: rgb(141, 119, 119);
}
.ping p {
  float: right;
  font-size: 12px;
  color: rgb(212, 211, 211);
}
</style>
